<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-01-03 09:36:06
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-01-04 14:44:42
 * @FilePath: \ZHGD-Vue2\src\views\ReportDesign\components\DesignEditor\components\DesignBase\components\DesignSelect\DesignSelect.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-select class="design-select"
        v-model="value"
        :multiple="element.options.multiple"
        :collapse-tags="element.options.collapseTags"
        :multiple-limit="element.options.multipleLimit"
        :size="element.options.size"
        :clearable="element.options.clearable"
        :filterable="element.options.filterable"
        :placeholder="element.options.placeholder">
        <el-option v-for="(item, index) in selectOption"
            :key="index"
            :label="item[element.options.label]"
            :value="item[element.options.value]">
        </el-option>
    </el-select>
</template>

<script>
import { customInterface_get, customInterface_post } from "@/api/ReportDesign/ReportDesign.js";
import { warning, success, errorInfo } from "@/utils/errorInfo";
export default {
    name: "DesignSelect",
    props: {
        element: {
            type: Object
        },
        Api: {
            type: Object
        }
    },
    data() {
        return {
            value: "",
            selectOption: []
        }
    },
    methods: {
        watchApi(val) { // 设计时获取数据
            if (val) {
                let data = this.Api.options.find(item => item.api === this.element.options.api) || null;
                if (!data) {
                    warning('接口被修改或已被删除，无法进行数据预览');
                    return;
                }
                // 处理参数
                let params = {};
                data.params.forEach(item => {
                    if (item.disabled) params[item.field] = item.testData;
                });
                // 接口处理
                if (data.method === 'get' && data.structure === 'array') { // get请求
                    customInterface_get(data.api, params).then((res) => {
                        let resData = res?.data || null;
                        if (resData) {
                            success('接口调用成功');
                            this.selectOption = resData || [];
                        } else errorInfo('接口数据错误');
                    })
                } else if (data.method === 'post' && data.structure === 'array') { // post请求
                    customInterface_post(data.api, params).then((res) => {
                        let resData = res?.data || null;
                        if (resData) {
                            success('接口调用成功');
                            this.selectOption = resData || [];
                        } else errorInfo('接口数据错误');
                    })
                } else {
                    warning('Select组件不接受 Object的数据类型，请配置数据类型为 Array');
                }
            }
        }
    },
    watch: {
        'element.options.api': 'watchApi'
    }
}
</script>
